// 博客数据管理
export const blogPosts = [
  {
    id: 1,
    title: 'Vue 3 组合式API详解',
    slug: 'vue-3-composition-api-guide',
    excerpt: '深入了解Vue 3的组合式API，如何使用setup函数和响应式API来构建更好的Vue应用。本文将通过实例展示组合式API的强大功能和使用方法...',
    content: `
      <h2>引言</h2>
      <p>Vue 3带来了许多激动人心的新特性，其中最重要的就是组合式API。这个新的API让我们能够更好地组织和复用代码逻辑，特别是在大型应用中。</p>
      
      <h2>核心概念</h2>
      <p>组合式API的核心是<code>setup()</code>函数，它是一个新的组件选项。在setup函数中，我们可以使用各种响应式API来创建响应式状态、计算属性和监听器。</p>
      
      <h3>响应式引用</h3>
      <p>使用<code>ref()</code>可以创建响应式引用：</p>
      <pre><code>import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0</code></pre>

      <h3>响应式对象</h3>
      <p>使用<code>reactive()</code>可以创建响应式对象：</p>
      <pre><code>import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue'
})</code></pre>

      <h2>实践应用</h2>
      <p>让我们通过一个简单的计数器例子来看看组合式API的使用：</p>
      <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;{{ count }}&lt;/p&gt;
    &lt;button @click="increment"&gt;+&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    const increment = () => {
      count.value++
    }
    
    return {
      count,
      increment
    }
  }
}
&lt;/script&gt;</code></pre>

      <h2>总结</h2>
      <p>组合式API为Vue 3带来了更强大的功能组织能力，让我们能够更好地复用逻辑和管理复杂状态。通过学习和掌握这些新特性，我们可以构建更加健壮和可维护的Vue应用。</p>
    `,
    image: require('@/assets/background.jpg'),
    category: '技术分享',
    tags: ['Vue', 'JavaScript', '前端'],
    author: '博主',
    date: '2025-09-15',
    updatedAt: '2025-09-16',
    views: 1234,
    likes: 45,
    readingTime: 8
  },
  {
    id: 2,
    title: '现代前端开发工具链完整指南',
    slug: 'modern-frontend-toolchain-guide',
    excerpt: '探索现代前端开发中常用的工具和技术栈，包括构建工具、测试框架、部署方案等。让我们一起了解如何构建高效的开发环境，提升开发效率...',
    content: `
      <h2>前端工具链概述</h2>
      <p>现代前端开发离不开各种工具的支持，一个完整的工具链可以大大提升开发效率和代码质量。</p>
      
      <h2>包管理器</h2>
      <h3>npm vs yarn vs pnpm</h3>
      <p>选择合适的包管理器对项目开发至关重要：</p>
      <ul>
        <li><strong>npm</strong> - Node.js默认包管理器，生态最完整</li>
        <li><strong>yarn</strong> - Facebook开发，安装速度快，锁文件机制好</li>
        <li><strong>pnpm</strong> - 节省磁盘空间，安装速度快，支持monorepo</li>
      </ul>
      
      <h2>构建工具</h2>
      <h3>Webpack vs Vite vs Rollup</h3>
      <p>构建工具的选择会影响开发体验和构建性能...</p>
      
      <h2>代码质量工具</h2>
      <h3>ESLint + Prettier</h3>
      <p>代码质量工具帮助我们维护一致的代码风格和发现潜在问题...</p>
    `,
    image: require('@/assets/background.jpg'),
    category: '技术分享',
    tags: ['工具链', 'Webpack', 'Vite', 'ESLint'],
    author: '博主',
    date: '2025-09-18',
    views: 856,
    likes: 32,
    readingTime: 12
  },
  {
    id: 3,
    title: '响应式设计最佳实践与Bootstrap应用',
    slug: 'responsive-design-bootstrap-best-practices',
    excerpt: '分享在移动端和桌面端都能良好展示的响应式设计技巧和Bootstrap使用心得。让网站在各种设备上都有完美的表现，提升用户体验...',
    content: `
      <h2>响应式设计原则</h2>
      <p>响应式设计是现代Web开发的基础技能，它让网站能够在不同设备上提供最佳的用户体验。</p>
      
      <h2>Bootstrap网格系统</h2>
      <p>Bootstrap的12列网格系统是响应式布局的核心...</p>
      
      <h2>移动优先设计</h2>
      <p>从移动端开始设计，然后逐步增强到桌面端...</p>
    `,
    image: require('@/assets/background.jpg'),
    category: '学习笔记',
    tags: ['响应式', 'Bootstrap', 'CSS', 'Mobile First'],
    author: '博主',
    date: '2025-09-20',
    views: 692,
    likes: 28,
    readingTime: 6
  },
  {
    id: 4,
    title: '我的编程学习之路：从零基础到全栈开发',
    slug: 'my-programming-journey-from-zero-to-fullstack',
    excerpt: '回顾自己从编程小白到开发者的成长历程，分享学习心得和遇到的挑战。希望能给正在学习路上的朋友一些启发和鼓励...',
    content: `
      <h2>开始的契机</h2>
      <p>回想起刚开始接触编程的时候，那时的我对计算机只是停留在使用层面...</p>
      
      <h2>学习历程</h2>
      <h3>第一阶段：HTML/CSS基础</h3>
      <p>从最基础的HTML标签开始，学会了网页的基本结构...</p>
      
      <h3>第二阶段：JavaScript入门</h3>
      <p>JavaScript的学习让我真正理解了编程的概念...</p>
      
      <h2>遇到的挑战</h2>
      <p>学习过程中遇到了很多困难，比如异步编程、闭包等概念...</p>
      
      <h2>给新手的建议</h2>
      <ul>
        <li>保持持续学习的习惯</li>
        <li>多动手实践，不要只看不做</li>
        <li>加入技术社区，与其他开发者交流</li>
        <li>不要害怕犯错，错误是学习的最好老师</li>
      </ul>
    `,
    image: require('@/assets/background.jpg'),
    category: '生活随笔',
    tags: ['学习', '成长', '心得', '编程'],
    author: '博主',
    date: '2025-09-22',
    views: 1045,
    likes: 67,
    readingTime: 10
  },
  {
    id: 5,
    title: 'Node.js项目部署实践：从开发到生产',
    slug: 'nodejs-deployment-guide-dev-to-production',
    excerpt: '详细介绍如何将Node.js应用部署到云服务器，包括环境配置、PM2使用、nginx反向代理等实用技巧。让你的应用稳定运行在生产环境...',
    content: `
      <h2>部署准备工作</h2>
      <p>在部署Node.js应用之前，我们需要做好充分的准备工作...</p>
      
      <h2>服务器环境配置</h2>
      <h3>Node.js安装</h3>
      <p>推荐使用nvm来管理Node.js版本...</p>
      
      <h3>PM2进程管理</h3>
      <p>PM2是一个优秀的Node.js进程管理工具...</p>
      
      <h2>nginx反向代理配置</h2>
      <p>使用nginx作为反向代理可以提升应用性能和安全性...</p>
      
      <h2>SSL证书配置</h2>
      <p>配置HTTPS对网站安全性至关重要...</p>
    `,
    image: require('@/assets/background.jpg'),
    category: '项目经验',
    tags: ['Node.js', '部署', '运维', 'PM2', 'nginx'],
    author: '博主',
    date: '2025-09-25',
    views: 743,
    likes: 39,
    readingTime: 15
  },
  {
    id: 6,
    title: '前端性能优化实战指南',
    slug: 'frontend-performance-optimization-guide',
    excerpt: '全面总结前端性能优化的各种方法和技巧，从代码层面到网络层面，帮助你打造更快的Web应用。包含实际案例和优化前后的对比数据...',
    content: `
      <h2>性能优化的重要性</h2>
      <p>网站性能直接影响用户体验和业务转化率...</p>
      
      <h2>图片优化</h2>
      <h3>格式选择</h3>
      <ul>
        <li>WebP - 现代浏览器的最佳选择</li>
        <li>AVIF - 未来的图片格式</li>
        <li>懒加载实现</li>
      </ul>
      
      <h2>代码分割</h2>
      <p>通过动态导入实现按需加载...</p>
      
      <h2>缓存策略</h2>
      <p>合理的缓存策略可以大大提升加载速度...</p>
    `,
    image: require('@/assets/background.jpg'),
    category: '技术分享',
    tags: ['性能优化', '前端', 'Web', '用户体验'],
    author: '博主',
    date: '2025-09-28',
    views: 987,
    likes: 54,
    readingTime: 11
  }
]

// 获取所有文章
export const getAllPosts = () => {
  return blogPosts
}

// 根据ID获取文章
export const getPostById = (id) => {
  return blogPosts.find(post => post.id === parseInt(id))
}

// 根据分类获取文章
export const getPostsByCategory = (category) => {
  return blogPosts.filter(post => post.category === category)
}

// 根据标签获取文章
export const getPostsByTag = (tag) => {
  return blogPosts.filter(post => post.tags.includes(tag))
}

// 获取相关文章
export const getRelatedPosts = (currentPostId, limit = 3) => {
  const currentPost = getPostById(currentPostId)
  if (!currentPost) return []
  
  const relatedPosts = blogPosts
    .filter(post => post.id !== currentPostId)
    .filter(post => 
      post.category === currentPost.category || 
      post.tags.some(tag => currentPost.tags.includes(tag))
    )
    .sort((a, b) => {
      // 计算相似度分数
      const aScore = (a.category === currentPost.category ? 2 : 0) +
        a.tags.filter(tag => currentPost.tags.includes(tag)).length
      const bScore = (b.category === currentPost.category ? 2 : 0) +
        b.tags.filter(tag => currentPost.tags.includes(tag)).length
      return bScore - aScore
    })
    .slice(0, limit)
  
  return relatedPosts
}

// 获取最新文章
export const getLatestPosts = (limit = 6) => {
  return blogPosts
    .sort((a, b) => new Date(b.date) - new Date(a.date))
    .slice(0, limit)
}

// 获取热门文章
export const getPopularPosts = (limit = 6) => {
  return blogPosts
    .sort((a, b) => b.views - a.views)
    .slice(0, limit)
}

// 搜索文章
export const searchPosts = (keyword) => {
  if (!keyword) return blogPosts
  
  const lowerKeyword = keyword.toLowerCase()
  return blogPosts.filter(post =>
    post.title.toLowerCase().includes(lowerKeyword) ||
    post.excerpt.toLowerCase().includes(lowerKeyword) ||
    post.content.toLowerCase().includes(lowerKeyword) ||
    post.tags.some(tag => tag.toLowerCase().includes(lowerKeyword))
  )
}

// 获取所有分类
export const getCategories = () => {
  const categories = {}
  blogPosts.forEach(post => {
    if (categories[post.category]) {
      categories[post.category]++
    } else {
      categories[post.category] = 1
    }
  })
  return categories
}

// 获取所有标签
export const getTags = () => {
  const tags = {}
  blogPosts.forEach(post => {
    post.tags.forEach(tag => {
      if (tags[tag]) {
        tags[tag]++
      } else {
        tags[tag] = 1
      }
    })
  })
  return tags
}

// 获取博客统计信息
export const getBlogStats = () => {
  const totalPosts = blogPosts.length
  const totalViews = blogPosts.reduce((sum, post) => sum + post.views, 0)
  const totalLikes = blogPosts.reduce((sum, post) => sum + post.likes, 0)
  const categories = Object.keys(getCategories()).length
  const tags = Object.keys(getTags()).length
  
  return {
    totalPosts,
    totalViews,
    totalLikes,
    categories,
    tags
  }
}
